<template>
  <div id="dayEcharts" ref="chart" style="width: 100%; height: 400px;"></div>
  <!-- <button @click="btn">++++++++</button> -->
</template>

<script setup lang="ts">
import { ref, watch, onMounted, defineProps } from 'vue';
import * as echarts from 'echarts';

interface IProps {
  data: Array<any>;
}

const props = defineProps<IProps>();

const chartRef = ref(null);

// 监听 data 变化，更新图表
watch(() => props.data, (newData) => {
  // console.log(newData);
  if (newData) {
    const result = newData.map(item => item.Sales)
    console.log(result);
    const filteredResult = result.filter(value => value !== undefined)
    renderChart(filteredResult);
  }
});

const btn = () => {
  console.log(props.data);
};

// 渲染图表
const renderChart = (data:any) => {
const chartContainer = document.getElementById('dayEcharts');
const chart = echarts.init(chartContainer);
  // 在这里根据传入的数据配置图表
  const option = {
    xAxis: {
      type: 'category',
      data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      type: 'bar',
      data: data
    }]
  };
  chart.setOption(option);
};

onMounted(() => {
  if (props.data) {
    const result = props.data.map(item => item.Sales)
    const filteredResult = result.filter(value => value !== undefined)
    renderChart(filteredResult);
  }
});
</script>